import {useState} from 'react'
import jwt_decode from "jwt-decode"
import { Card, Row, Col, Input, Space } from 'antd'
import Highlight from 'react-highlight'

const { TextArea } = Input;

import 'highlight.js/styles/idea.css'


const JwtDecode: React.FC = () => {
    const [payload, setPayload] = useState('')
    const [header, setHeader] = useState('')

    const onTokenChange = (val:string) => {
        if (!val) {
            return
        }

        const p = jwt_decode(val) 
        const h = jwt_decode(val, { header: true })
        setPayload(JSON.stringify(p, null, 2))
        setHeader(JSON.stringify(h, null, 2))

    }

    return (
        <div>
            <Row gutter={16}>
                <Col span={10}>
                    <Card>
                        <TextArea onChange={e => onTokenChange(e.target.value)} style={{ height: 600, resize: 'none'}}/>
                    </Card>
                </Col>
                <Col span={14}>
                    <Space direction="vertical" size="middle" style={{width: '100%'}} >
                        <Card title="HEADER" size="small">
                            <Highlight className='json'>
                                {header}
                            </Highlight>
                        </Card>
                        <Card title="PAYLOAD" size="small" bodyStyle={{height: 350, overflow: "auto"}}>
                            <Highlight className='json'>
                                {payload}
                            </Highlight>
                        </Card>
                    </Space>
                </Col>
            </Row>
            
        </div>
    )
}

export default JwtDecode

// export default function JwtDecode<{jwt: string}>(props) {

//     console.log(jwt)
//     return (
//         <div>JwtDecode</div>
//     )
// }
